<template>
  <Left />
  <Right />
  <FloatButton :btn_data="btn_data"></FloatButton>
  <Ancient v-if="AncientShow" />
  <Flooding v-if="FloodingShow" />
  <HeightAnalysis v-if="HeightAnalysisShow" />
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue'
import FloatButton from '@/components/FloatButton/index.vue'

import Left from './Panel/left/index.vue'
import Right from './Panel/right/index.vue'
import Ancient from './children/Ancient.vue'
import Flooding from './children/Flooding.vue'
import HeightAnalysis from './children/HeightAnalysis.vue'

import { initLake, exitLake } from './funs/lake'
import { initAncient, exitAncient } from './funs/ancient'

// 面板显示隐藏状态
const AncientShow = ref(false)
const FloodingShow = ref(false)
const HeightAnalysisShow = ref(false)

const btn_data = reactive([
  { id: 0, name: '世界湖区', init: initLake, exit: exitLake },
  {
    id: 1,
    name: '古城分布',
    init: () => {
      AncientShow.value = true
      initAncient()
    },
    exit: () => {
      AncientShow.value = false
      exitAncient()
    }
  },
  {
    id: 2,
    name: '水淹分析',
    init: () => {
      FloodingShow.value = true
    },
    exit: () => {
      FloodingShow.value = false
    }
  },
  {
    id: 3,
    name: '限高分析',
    init: () => {
      HeightAnalysisShow.value = true
    },
    exit: () => {
      HeightAnalysisShow.value = false
    }
  }
])

onMounted(() => {})
onUnmounted(() => {
  // 离开页面时，清除所有的分析内容
  btn_data.forEach(item => item.exit())
})
</script>
<style lang="scss" scoped>
.contentBox {
  @include Padding(15, 0, 0, 0);
}

.contentBox1 {
  @include Padding(5, 0, 0, 0);
}

#echartContainer {
  @include Width(430);
  @include hHeight(300);
  z-index: 100;
  position: absolute;
  @include Top(-490);
}

.btns {
  @include MarginTop(20);
}
.btn1 {
  @include MarginTop(20);
  @include MarginLeft(180);
}
.btn2 {
  @include MarginTop(-25);
  @include MarginLeft(180);
}
.legend {
  @include MarginTop(20);
  @include MarginLeft(180);
}
.contentWrap {
  @include hHeight(30);
  @include FontSize(14);
  display: flex;
  justify-content: flex-start;
  @include LineHeight(30);
  .left {
    @include Padding(0, 5, 0, 5);
  }
  .right {
    flex: 1;
    @include Padding(0, 5, 0, 10);
  }
}
</style>
